@page "/equipment-management"
@using jiuyuan.服务
@using jiuyuan.数据.基础数据类
@using jiuyuan.管理器
@using jiuyuan.数据.共享类

<div class="admin-container">
    <div class="admin-header">
        <h3>装备管理</h3>
        <button class="btn-primary" @onclick="添加新装备">添加新装备</button>
    </div>

    <div class="admin-content">
        @if (!数据已加载)
        {
            <div class="loading">正在加载数据...</div>
        }
        else
        {
            <div class="filters">
                <input type="text" @bind="搜索关键词" placeholder="搜索装备名称..." class="form-control" @oninput="应用筛选" />
                <select @bind="筛选装备槽位" class="form-control" >
                    <option value="">所有槽位</option>
                    @foreach (var slot in Enum.GetValues<装备槽位>())
                    {
                        <option value="@slot">@slot</option>
                    }
                </select>
            </div>

            <div class="item-list">
                @foreach (var 装备 in 显示装备列表)
                {
                    <div class="item-card">
                        <div class="item-info">
                            <h4>@装备.名称</h4>
                            <p>槽位: @(装备.装备槽位?.ToString() ?? "未指定")</p>
                            <p>等级要求: @装备.等级要求</p>
                            <p>效果数量: @装备.效果ID列表.Count</p>
                        </div>
                        <div class="item-actions">
                            <button class="action-button view-button" @onclick='() => 查看装备详情(装备)'>查看</button>
                            <button class="action-button edit-button" @onclick='() => 编辑装备(装备)'>编辑</button>
                            <button class="action-button delete-button" @onclick='() => 删除装备(装备.Id)'>删除</button>
                        </div>
                    </div>
                }
            </div>
        }
    </div>
</div>

<!-- 装备详情弹窗 -->
<div class="modal" style="display: @(显示详情弹窗 ? "block" : "none");">
    <div class="modal-content">
        <div class="modal-header">
            <h3>装备详情</h3>
            <button class="close-button" @onclick="关闭详情弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (选中的装备 != null)
            {
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>装备名称:</label>
                        <span>@选中的装备.名称</span>
                    </div>
                    <div class="detail-item">
                        <label>槽位:</label>
                        <span>@(选中的装备.装备槽位?.ToString() ?? "未指定")</span>
                    </div>
                    <div class="detail-item">
                        <label>等级要求:</label>
                        <span>@选中的装备.等级要求</span>
                    </div>
                    <div class="detail-item">
                        <label>最大堆叠数:</label>
                        <span>@选中的装备.最大堆叠数</span>
                    </div>
                    <div class="detail-item full-width">
                        <label>描述:</label>
                        <span>@选中的装备.描述</span>
                    </div>
                    <div class="detail-item full-width">
                        <label>基础属性:</label>
                        <div class="attributes-preview">
                            <div class="attribute-item">
                                <span>生命值: @选中的装备.基础属性.生命值</span>
                            </div>
                            <div class="attribute-item">
                                <span>魔法值: @选中的装备.基础属性.魔法值</span>
                            </div>
                            <div class="attribute-item">
                                <span>物理攻击: @选中的装备.基础属性.物理攻击</span>
                            </div>
                            <div class="attribute-item">
                                <span>物理防御: @选中的装备.基础属性.物理防御</span>
                            </div>
                        </div>
                    </div>
                    <div class="detail-item full-width">
                        <label>装备效果:</label>
                        <div class="effects-preview">
                            @if (选中的装备.效果ID列表.Any())
                            {
                                @foreach (var effectId in 选中的装备.效果ID列表)
                                {
                                    var effectConfig = 效果管理器.获取效果配置(effectId);
                                    if (effectConfig != null)
                                    {
                                        <div class="effect-preview">
                                            <span class="effect-type">@effectConfig.名称</span>
                                            <span class="effect-desc">@效果管理器.获取效果描述(effectConfig)</span>
                                        </div>
                                    }
                                }
                            }
                            else
                            {
                                <span class="no-effects">无效果</span>
                            }
                        </div>
                    </div>
                    <div class="detail-item">
                        <label>创建时间:</label>
                        <span>@选中的装备.创建时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                    <div class="detail-item">
                        <label>更新时间:</label>
                        <span>@选中的装备.更新时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

<!-- 编辑装备弹窗 -->
<div class="modal" style="display: @(显示编辑弹窗 ? "block" : "none");">
    <div class="modal-content large">
        <div class="modal-header">
            <h3>@(IsEditing ? "编辑装备" : "添加新装备")</h3>
            <button class="close-button" @onclick="关闭编辑弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (当前装备 != null)
            {
                <div class="form-grid">
                    <div class="form-group">
                        <label for="equipmentName">装备名称:</label>
                        <input type="text" id="equipmentName" @bind="当前装备.名称" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="equipmentSlot">装备槽位:</label>
                        <select id="equipmentSlot" @bind="当前装备.装备槽位" class="form-control">
                            <option value="">请选择槽位</option>
                            @foreach (var slot in Enum.GetValues<装备槽位>())
                            {
                                <option value="@slot">@slot</option>
                            }
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="equipmentLevel">等级要求:</label>
                        <input type="number" id="equipmentLevel" @bind="当前装备.等级要求" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="equipmentStack">最大堆叠数:</label>
                        <input type="number" id="equipmentStack" @bind="当前装备.最大堆叠数" class="form-control" />
                    </div>
                    <div class="form-group full-width">
                        <label for="equipmentDescription">描述:</label>
                        <textarea id="equipmentDescription" @bind="当前装备.描述" class="form-control" rows="3"></textarea>
                    </div>
                    
                    <!-- 基础属性配置 -->
                    <div class="form-group full-width">
                        <label>基础属性:</label>
                        <div class="attributes-container">
                            <div class="attribute-row">
                                <div class="attribute-group">
                                    <label>生命值:</label>
                                    <input type="number" @bind="当前装备.基础属性.生命值" class="form-control small" />
                                </div>
                                <div class="attribute-group">
                                    <label>魔法值:</label>
                                    <input type="number" @bind="当前装备.基础属性.魔法值" class="form-control small" />
                                </div>
                                <div class="attribute-group">
                                    <label>物理攻击:</label>
                                    <input type="number" @bind="当前装备.基础属性.物理攻击" class="form-control small" />
                                </div>
                                <div class="attribute-group">
                                    <label>物理防御:</label>
                                    <input type="number" @bind="当前装备.基础属性.物理防御" class="form-control small" />
                                </div>
                            </div>
                            <div class="attribute-row">
                                <div class="attribute-group">
                                    <label>火攻:</label>
                                    <input type="number" @bind="当前装备.基础属性.火属性攻击" class="form-control small" />
                                </div>
                                <div class="attribute-group">
                                    <label>水攻:</label>
                                    <input type="number" @bind="当前装备.基础属性.水属性攻击" class="form-control small" />
                                </div>
                                <div class="attribute-group">
                                    <label>风攻:</label>
                                    <input type="number" @bind="当前装备.基础属性.风属性攻击" class="form-control small" />
                                </div>
                                <div class="attribute-group">
                                    <label>土攻:</label>
                                    <input type="number" @bind="当前装备.基础属性.土属性攻击" class="form-control small" />
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 效果配置区域 -->
                    <div class="form-group full-width">
                        <label>装备效果:</label>
                        <div class="effects-container">
                            <div class="effects-header">
                                <span>效果列表</span>
                                <button type="button" class="btn-secondary small" @onclick="添加效果">添加效果</button>
                            </div>
                            
                            @if (当前装备.效果ID列表.Any())
                            {
                                @for (int i = 0; i < 当前装备.效果ID列表.Count; i++)
                                {
                                    var effectId = 当前装备.效果ID列表.ToList()[i];
                                    var effectConfig = 效果管理器.获取效果配置(effectId);
                                    <div class="effect-item">
                                        <div class="effect-header">
                                            @if (effectConfig != null)
                                            {
                                                <span>@effectConfig.名称 (@effectConfig.效果类型)</span>
                                            }
                                            else
                                            {
                                                <span>未知效果</span>
                                            }
                                            <button type="button" class="btn-danger small" @onclick="() => 移除效果(i)">移除</button>
                                        </div>
                                        
                                        @if (effectConfig != null)
                                        {
                                            <div class="effect-params">
                                                <p>@效果管理器.获取效果描述(effectConfig)</p>
                                            </div>
                                        }
                                    </div>
                                }
                            }
                            else
                            {
                                <div class="no-effects">暂无效果，点击"添加效果"按钮添加</div>
                            }
                        </div>
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn-primary" @onclick="保存装备">@(!IsEditing ? "添加" : "更新")</button>
                    <button class="btn-secondary" @onclick="关闭编辑弹窗">取消</button>
                </div>
            }
        </div>
    </div>
</div>

<!-- 效果选择弹窗 -->
<div class="modal" style="display: @(显示效果选择弹窗 ? "block" : "none");">
    <div class="modal-content">
        <div class="modal-header">
            <h3>选择效果</h3>
            <button class="close-button" @onclick="关闭效果选择弹窗">&times;</button>
        </div>
        <div class="modal-body">
            <div class="search-box">
                <input type="text" @bind="效果搜索关键词" placeholder="搜索效果..." class="form-control" @oninput="应用效果搜索" />
            </div>
            <div class="effects-list">
                @foreach (var effect in 过滤后的效果列表)
                {
                    <div class="effect-item-select" @onclick="() => 选择效果(effect.Id)">
                        <h4>@effect.名称</h4>
                        <p>@effect.效果类型</p>
                        <p>@效果管理器.获取效果描述(effect)</p>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

<style>
    .filters {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .filters .form-control {
        flex: 1;
    }

    .modal-content.large {
        max-width: 900px;
    }

    /* 属性容器样式 */
    .attributes-container {
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 15px;
        background-color: rgba(30, 30, 60, 0.5);
    }

    .attribute-row {
        display: flex;
        gap: 15px;
        margin-bottom: 10px;
    }

    .attribute-group {
        flex: 1;
    }

    .attribute-group label {
        display: block;
        color: #a0a0e0;
        margin-bottom: 5px;
    }

    .attributes-preview {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 10px;
    }

    .attribute-item {
        padding: 5px;
        border-bottom: 1px solid rgba(74, 44, 141, 0.5);
    }

    .attribute-item:last-child {
        border-bottom: none;
    }

    /* 效果容器样式 */
    .effects-container {
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 15px;
        background-color: rgba(30, 30, 60, 0.5);
    }

    .effects-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #4a2c8d;
    }

    .effects-header span {
        color: #b19cd9;
        font-weight: 500;
    }

    .effect-item {
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 15px;
        background-color: rgba(40, 40, 80, 0.8);
    }

    .effect-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .effect-params {
        padding: 10px;
        background-color: rgba(30, 30, 60, 0.5);
        border-radius: 5px;
    }

    .effects-preview {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .effect-preview {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
    }

    .effect-type {
        color: #b19cd9;
        font-weight: 500;
    }

    .effect-desc {
        color: #a0a0e0;
        font-size: 0.9rem;
    }

    .no-effects {
        color: #666;
        font-style: italic;
        text-align: center;
        padding: 20px;
    }

    .search-box {
        margin-bottom: 15px;
    }

    .effects-list {
        max-height: 400px;
        overflow-y: auto;
    }

    .effect-item-select {
        padding: 10px;
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        margin-bottom: 10px;
        background-color: rgba(40, 40, 80, 0.8);
        cursor: pointer;
    }

    .effect-item-select:hover {
        background-color: rgba(60, 60, 100, 0.8);
    }

    .effect-item-select h4 {
        color: #b19cd9;
        margin: 0 0 5px 0;
    }

    .effect-item-select p {
        color: #a0a0e0;
        margin: 2px 0;
        font-size: 0.9rem;
    }
</style>

@code {
    [Inject] public 配置加载器 配置加载器 { get; set; } = default!;
    [Inject] public 效果管理器 效果管理器 { get; set; } = default!;
    [Inject] public ILogger<装备管理> Logger { get; set; } = default!;
    [Inject] public IJSRuntime JSRuntime { get; set; } = default!;

    private List<游戏元素> 装备列表 = [];
    private List<游戏元素> 显示装备列表 = [];
    private List<效果配置> 所有效果列表 = [];
    private List<效果配置> 过滤后的效果列表 = [];
    private bool 数据已加载 = false;
    private string 搜索关键词 = "";
    private string 筛选装备槽位 = "";

    private 游戏元素 当前装备 = new 游戏元素 { 类型 = 物品类型.装备, 基础属性 = new 属性配置() };
    private 游戏元素 选中的装备 = new 游戏元素 { 基础属性 = new 属性配置() };
    private bool IsEditing = false;
    private Guid 编辑中的装备Id = Guid.Empty;
    private bool 显示详情弹窗 = false;
    private bool 显示编辑弹窗 = false;
    private bool 显示效果选择弹窗 = false;
    private string 效果搜索关键词 = "";

    protected override async Task OnInitializedAsync()
    {
        await 加载装备数据();
        await 加载效果数据();
    }

    private async Task 加载装备数据()
    {
        try
        {
            var allElements = await 配置加载器.获取所有游戏元素();
            装备列表 = allElements.Where(e => e.类型 == 物品类型.装备).ToList();
            显示装备列表 = 装备列表;
            数据已加载 = true;
            StateHasChanged();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "加载装备数据时发生错误");
        }
    }

    private async Task 加载效果数据()
    {
        try
        {
            所有效果列表 = await 效果管理器.获取所有效果配置From数据库();
            过滤后的效果列表 = 所有效果列表;
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "加载效果数据时发生错误");
        }
    }

    private void 应用筛选()
    {
        var 结果 = 装备列表.AsQueryable();

        if (!string.IsNullOrEmpty(搜索关键词))
        {
            结果 = 结果.Where(e => e.名称.Contains(搜索关键词, StringComparison.OrdinalIgnoreCase));
        }

        if (!string.IsNullOrEmpty(筛选装备槽位) && Enum.TryParse<装备槽位>(筛选装备槽位, out var 槽位))
        {
            结果 = 结果.Where(e => e.装备槽位 == 槽位);
        }

        显示装备列表 = 结果.ToList();
    }

    private void 查看装备详情(游戏元素 装备)
    {
        选中的装备 = 装备;
        显示详情弹窗 = true;
    }

    private void 关闭详情弹窗()
    {
        显示详情弹窗 = false;
    }

    private void 添加新装备()
    {
        当前装备 = new 游戏元素
        {
            Id = Guid.NewGuid(),
            类型 = 物品类型.装备,
            可装备 = true,
            最大堆叠数 = 1,
            基础属性 = new 属性配置(),
            效果ID列表 = new List<Guid>(),
            效果列表 = new List<技能效果>(),
            创建时间 = DateTime.Now,
            更新时间 = DateTime.Now
        };
        IsEditing = false;
        编辑中的装备Id = Guid.Empty;
        显示编辑弹窗 = true;
    }

    private void 编辑装备(游戏元素 装备)
    {
        // 深拷贝装备对象，避免直接修改原始数据
        当前装备 = new 游戏元素
        {
            Id = 装备.Id,
            名称 = 装备.名称,
            描述 = 装备.描述,
            类型 = 装备.类型,
            等级要求 = 装备.等级要求,
            装备槽位 = 装备.装备槽位,
            可装备 = 装备.可装备,
            最大堆叠数 = 装备.最大堆叠数,
            基础属性 = 装备.基础属性.深拷贝(),
            效果ID列表 = new List<Guid>(装备.效果ID列表),
            效果列表 = 装备.效果列表.Select(e => e.深拷贝()).ToList(),
            创建时间 = 装备.创建时间,
            更新时间 = DateTime.Now
        };
        IsEditing = true;
        编辑中的装备Id = 装备.Id;
        显示编辑弹窗 = true;
    }

    private void 关闭编辑弹窗()
    {
        显示编辑弹窗 = false;
    }

    private async Task 删除装备(Guid 装备Id)
    {
        var 装备 = 显示装备列表.FirstOrDefault(s => s.Id == 装备Id);
        if (装备 != null)
        {
            显示装备列表.Remove(装备);
            装备列表.Remove(装备);
            await 配置加载器.删除游戏元素(装备Id);
            应用筛选();
        }
    }

    // 效果管理方法
    private void 添加效果()
    {
        显示效果选择弹窗 = true;
        效果搜索关键词 = "";
        过滤后的效果列表 = 所有效果列表;
    }

    private void 移除效果(int index)
    {
        if (index >= 0 && index < 当前装备.效果ID列表.Count)
        {
            // 将ICollection<Guid>转换为List<Guid>以便操作
            var effectIds = 当前装备.效果ID列表.ToList();
            effectIds.RemoveAt(index);
            当前装备.效果ID列表 = effectIds;
            StateHasChanged();
        }
    }

    private void 选择效果(Guid effectId)
    {
        // 添加效果到当前装备
        if (!当前装备.效果ID列表.Contains(effectId))
        {
            当前装备.效果ID列表.Add(effectId);
        }
        
        关闭效果选择弹窗();
    }

    private void 关闭效果选择弹窗()
    {
        显示效果选择弹窗 = false;
    }

    private void 应用效果搜索()
    {
        if (string.IsNullOrWhiteSpace(效果搜索关键词))
        {
            过滤后的效果列表 = 所有效果列表;
        }
        else
        {
            过滤后的效果列表 = 所有效果列表
                .Where(e => e.名称.Contains(效果搜索关键词, StringComparison.OrdinalIgnoreCase) ||
                           e.效果类型.Contains(效果搜索关键词, StringComparison.OrdinalIgnoreCase))
                .ToList();
        }
    }

    private async Task 保存装备()
    {
        if (string.IsNullOrWhiteSpace(当前装备.名称))
        {
            await JSRuntime.InvokeVoidAsync("alert", "请输入装备名称");
            return;
        }

        if (!当前装备.装备槽位.HasValue)
        {
            await JSRuntime.InvokeVoidAsync("alert", "请选择装备槽位");
            return;
        }

        try
        {
            // 更新时间
            当前装备.更新时间 = DateTime.Now;
            
            // 如果没有创建时间，设置为当前时间
            if (当前装备.创建时间 == DateTime.MinValue)
            {
                当前装备.创建时间 = DateTime.Now;
            }

            // 保存到数据库
            await 配置加载器.保存游戏元素(当前装备);
            
            // 更新显示列表
            if (!IsEditing)
            {
                显示装备列表.Add(当前装备);
                装备列表.Add(当前装备);
            }
            else
            {
                var existingEquipment = 显示装备列表.FirstOrDefault(s => s.Id == 编辑中的装备Id);
                if (existingEquipment != null)
                {
                    var index = 显示装备列表.IndexOf(existingEquipment);
                    显示装备列表[index] = 当前装备;
                    
                    var originalIndex = 装备列表.IndexOf(existingEquipment);
                    装备列表[originalIndex] = 当前装备;
                }
            }

            显示编辑弹窗 = false;
            应用筛选();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "保存装备时发生错误");
            await JSRuntime.InvokeVoidAsync("alert", "保存装备时发生错误: " + ex.Message);
        }
    }
}